<template>
    <div>
        <Top><p class="content">我的</p></Top>
        <div class="one" @click="myuser()">
            <img :src="'https://elm.cangdu.org/img/'+url2" alt="">
            <div class="one-p">
                <p>{{username}}</p>
                <p><span><van-icon name="graphic"/></span> <span>暂无绑定手机号</span></p>
            </div>
            <span class="right"><van-icon name="arrow2" /></span>
        </div>
        <div class="two">
            <div class="twodiv"><span class="twodiv-span1">0.00</span><span class="twodiv-span2">元</span>
                <p class="twodiv-p1" @click="$router.push('/yver')">我的余额</p></div>

            <div class="twodiv"><span class="twodiv-span1" style="color: #ff5f3e;">3</span><span
                    class="twodiv-span2">个</span>
                <p class="twodiv-p1" @click="$router.push('/hongbao')">我的优惠</p></div>
            <div class="twodiv"><span class="twodiv-span1" style="color: #6ac20b;">0</span><span
                    class="twodiv-span2">分</span>
                <p class="twodiv-p1" @click="$router.push('/jifen')"> 我的积分</p></div>
        </div>

        <div class="three">
            <p @click="$router.push('/indent')" ><span><van-icon name="orders-o" /></span>我的订单<span class="right"><van-icon name="arrow" /></span></p>
            <p><span ><van-icon name="shop-o" color="rgb(252, 123, 83)"  /></span ><a href="https://activity.m.duiba.com.cn/autoLogin/notlogin#/chome/index"> 积分商城</a><span class="right"><van-icon name="arrow" /></span></p>
            <p @click="$router.push('/vip')"><span><van-icon name="gift-o" color="rgb(255, 198, 54)" /></span>饿了么会员卡<span class="right" ><van-icon name="arrow" /></span></p>
        </div>
        <div class="four"><p @click="$router.push('/serve')"><span><van-icon name="service-o" color="rgb(74, 165, 240)"/></span>服务中心<span class="right"> <van-icon name="arrow" /></span></p>
            <p @click="$router.push('/Download')"><span><van-icon name="down" color="rgb(74, 165, 240)"/></span>下载饿了么app<span class="right"><van-icon name="arrow" /></span></p></div>
        <Ibottom>

        </Ibottom>
    </div>
</template>

<script>
    import Top from "../components/Top";
    import Ibottom from "../components/Ibottom";
    // import {mapState} from "vuex";

    export default {
        name: "Indent",
        components: {Ibottom, Top},
        data() {
            return {

            }
        },
        methods: {
            myuser() {
                if (localStorage.user==undefined){
                    this.$router.push("/loin")
                }else {
                    this.$router.push("/myuser")
                }

            }
        },
        computed: {
            url2() {
                if (localStorage.user==undefined){
                    return 'default.jpg'
                }else {
                    return JSON.parse(localStorage.user).avatar
                }
            },
            username(){
                if (localStorage.user==undefined){
                    return "登录/注册";
                }else {
                    return JSON.parse(localStorage.user).username;
                }
            }

        },
        created() {


        }
    }
</script>

<style scoped>
    .content {
        font-size: 20px;
    }

    .one {
        /*display: flex;*/
        color: white;
        /*align-items: center;*/
        /*width: 96%;*/
        height: 80px;


        /*padding: 0% 2%;*/
        background-color:#3190e8;
    }
    .one img{
        /*display: inline-block;*/
        width: 60px;
        height: 60px;
        line-height: 60px;
        border-radius: 50%;
        vertical-align: middle;
        margin-bottom: 23px;
    }
    .one-p{
        margin-left: 10px;
        display: inline-block;
        padding-top: 10px;
    }
   .one-p p:nth-child(1){
font-size: 20px;
    }
    .one-p p:nth-child(2){
        /*font-size: 20px;*/
        padding-top: 10px;
    }
    .two {
        display: flex;
    }
    .three{
        margin-top: 10px;
        background-color: white;
    }
    .four{
        margin-top: 10px;
        background-color: white;
    }
    .right{
        display: inline-block;
        float: right;
    }
    .twodiv {
        width: 33.33%;

        border-right: 1px solid #f1f1f1;
        padding: 0;
        margin: 0;
        list-style: none;
        font-style: normal;
        text-decoration: none;

        color: #333;
        font-weight: 400;
        font-family: Microsoft Yahei;
        box-sizing: border-box;
        background-color: white;
        -webkit-tap-highlight-color: transparent;
        -webkit-font-smoothing: antialiased;
        text-align: center;
    }

    .twodiv-span1 {
        display: inline-block;
        font-size: 1.3rem;
        color: #f90;
        font-weight: 700;
        line-height: 1.3rem;
        font-family: Helvetica Neue, Tahoma;
        padding-top: 20px;
    }

    .twodiv-span2 {
        padding-top: 10px;
    }

    .twodiv-p1 {
        font-size: .57333rem;
        color: #666;
        font-weight: 400;
        padding-bottom: 10px;
        padding-top: 10px;
    }
    .three p,.four p{
        /*padding-left: 1.6rem;*/
        height: 30px;
      line-height: 30px;
        width: 90%;
        /*background-color: #3190e8;*/
        border-bottom: 1px solid #f1f1f1;
        padding: 0.4rem .266667rem .433333rem 1.6rem;
        font-size: 1rem;
        color: #333;
    }
    .three p span:nth-child(1),.four p span:nth-child(1){
        margin-right: 5px;
    }
    a{
      color: #333;
      padding: 0;
      margin: 0;
      list-style: none;
      font-style: normal;
      text-decoration: none;
      border: none;
      color: #333;
      font-weight: 400;
      font-family: Microsoft Yahei;
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
      -webkit-font-smoothing: antialiased;
    }
</style>